<template>
    <div v-if="showAd" class="video-ad">
      <video :src="videoSrc" @ended="onVideoEnd" width="1540" height="880"  autoplay muted loop></video>
      <button @click="closeAd">关闭广告</button>
    </div>
  </template>
   
  <script>
  export default {
    data() {
      return {
        showAd: true, // 控制广告显示
        videoSrc: 'https://www.sczyjk.top/prod-api/profile/upload/music/test1.mp4', // 视频源地址
      };
    },
    methods: {
      onVideoEnd() {
        this.showAd = false; // 视频播放结束后隐藏广告
      },
      closeAd() {
        this.showAd = false; // 用户点击关闭按钮时隐藏广告
      }
    }
  }
  </script>
   
  <style>
  .video-ad {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 背景遮罩 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* 确保在最上层 */
  }
  .video-ad video {
    max-width: 100%;
    max-height: 100%;
  }
  </style>